<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>物料配置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="material-setting">
      <search-btn-view immediate btn-text="查询物料" @before-open="resetSearch" @search="searchData">
        <template slot="append" v-if="selectMaterialList.length>0">
          <el-dropdown style="margin-left:10px" @command="toUpdatePriceStatus">
            <el-button type="primary" size="medium">修改金额显示状态</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="show">显示</el-dropdown-item>
              <el-dropdown-item command="hide">不显示</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="material-setting-table-div">
        <el-table fit stripe border :data="materialList" style="width:100%" height="parent" @selection-change="selectionChange">
          <el-table-column :resizable="false" type="selection" width="45px" align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialType" label="物料类型" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="model" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialDeptName" label="物料部门" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="providerNo" label="供方编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="status" label="状态" width="50px" align="center"></el-table-column>
          <el-table-column :resizable="false" width="80px" align="center">
            <template slot="header">
              <div class="table-label">采购单是否显示金额</div>
            </template>
            <template slot-scope="scope">
              <span>{{i18n.getMsg('purchaseOrder.hidePriceForPurchase.'+scope.row.hidePriceForPurchase)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js"
  ]);

</script>
<script src="./searchForm.js"></script>

<script>
  var app = new Vue({
    el: "#app",
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        providerNo: '',
        colorDescription: '',
        status: 1,
        materialDept: '',
        hidePriceForPurchase: '',
        materialType: ''
      };
      return {
        loading: false,
        materialList: [],
        selectMaterialList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        i18n: i18n,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        }
      }
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: search.status
        };

        var fields = ['materialName', 'materialType', 'model', 'color', 'colorDescription', 'providerName', 'providerNo',
          'hidePriceForPurchase'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        ajaxRequest("basicData/queryMaterialCompany", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function (error) {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      selectionChange: function (materialList) {
        this.selectMaterialList = materialList;
      },

      toUpdatePriceStatus: function (type) {
        var materialList = this.selectMaterialList;
        if (materialList.length === 0) {
          this.$alert('请选择需要修改金额显示状态的物料', '信息');
          return;
        }

        var hidePriceForPurchase;
        if (type === 'show') {
          materialList = _.filter(materialList, {
            hidePriceForPurchase: 1
          });
          hidePriceForPurchase = 0;
        } else {
          materialList = _.filter(materialList, {
            hidePriceForPurchase: 0
          });
          hidePriceForPurchase = 1;
        }

        if (materialList.length === 0) {
          var msg = i18n.getMsg(`purchaseOrder.error.hidePriceForPurchase.${hidePriceForPurchase}`);
          this.$alert(msg, '信息');
          return;
        }
        var ids = _.map(materialList, 'id');

        this.loading = true;
        var self = this;
        ajaxRequest('basicData/updateCompanyMaterialConfig', {
          id: ids.join(','),
          hidePriceForPurchase: hidePriceForPurchase
        }).then(function () {
          self.loading = false;
          self.$alert('采购单的金额显示状态修改成功', '信息', {
            callback: function () {
              self.setMaterialList();
            }
          })
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    }
  });

</script>

<style>
  .material-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .material-setting .material-setting-table-div {
    flex: 1;
    overflow: auto;
  }

  .material-setting .material-setting-table-div .table-label {
    padding: 0;
    float: left;
    white-space: normal;
    line-height: 18px;
  }

</style>

</html>
